<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员页面 - 教育平台</title>
</head>
<body>
    <div class="page-container">
        <header class="main-header">
            <h1>管理员页面</h1>
            <nav class="primary-nav">
                <a href="C://Users/chuan/Desktop/web大作业/首页.html">返回首页</a>
            </nav>
        </header>

        <div class="admin-container">
            <h2>用户管理</h2>
            <div id="userList"></div>

            <h3>添加新用户</h3>
            <form id="addUserForm">
                <input type="text" id="newUsername" placeholder="用户名" required>
                <input type="email" id="newEmail" placeholder="电子邮箱" required>
                <input type="password" id="newPassword" placeholder="密码" required>
                <button type="submit">添加用户</button>
            </form>
        </div>
    </div>

    <script>
        const DB_NAME = 'EducationPlatformDB';
        const DB_VERSION = 1;
        const STORE_NAME = 'users';
        let db = null;

        // 初始化数据库
        async function initDB() {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open(DB_NAME, DB_VERSION);
                request.onerror = (event) => reject(event.target.error);
                request.onsuccess = (event) => {
                    db = event.target.result;
                    resolve(db);
                };
                request.onupgradeneeded = (event) => {
                    db = event.target.result;
                    if (!db.objectStoreNames.contains(STORE_NAME)) {
                        db.createObjectStore(STORE_NAME, { keyPath: 'username' });
                    }
                };
            });
        }

        // 获取所有用户
        async function getAllUsers() {
            const transaction = db.transaction([STORE_NAME], 'readonly');
            const store = transaction.objectStore(STORE_NAME);
            const users = [];

            return new Promise((resolve) => {
                store.openCursor().onsuccess = (event) => {
                    const cursor = event.target.result;
                    if (cursor) {
                        users.push(cursor.value);
                        cursor.continue();
                    } else {
                        resolve(users);
                    }
                };
            });
        }

        // 删除用户
        async function deleteUser(username) {
            const transaction = db.transaction([STORE_NAME], 'readwrite');
            const store = transaction.objectStore(STORE_NAME);
            store.delete(username);
            alert(`用户 ${username} 已被删除`);
            loadUsers();
        }

        // 添加用户
        async function addUser(userData) {
            const transaction = db.transaction([STORE_NAME], 'readwrite');
            const store = transaction.objectStore(STORE_NAME);
            try {
                await store.add(userData);
                alert(`用户 ${userData.username} 已添加`);
                loadUsers();
            } catch (error) {
                alert('添加用户失败: ' + error.message);
            }
        }

        // 加载用户并展示
        async function loadUsers() {
            const users = await getAllUsers();
            const userList = document.getElementById('userList');
            userList.innerHTML = '';

            users.forEach(user => {
                const userDiv = document.createElement('div');
                userDiv.innerHTML = `
                    <p>用户名: ${user.username}, 邮箱: ${user.email} 
                    <button onclick="deleteUser('${user.username}')">删除</button></p>
                `;
                userList.appendChild(userDiv);
            });
        }

        // 表单提交事件
        document.getElementById('addUserForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const newUser = {
                username: document.getElementById('newUsername').value,
                email: document.getElementById('newEmail').value,
                password: document.getElementById('newPassword').value
            };
            addUser(newUser);
            this.reset();
        });

        // 初始化数据库并加载用户
        initDB().then(loadUsers).catch(error => {
            console.error('数据库初始化失败:', error);
        });
    </script>
</body>
</html>